<template>
  <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="input-tag"
      size="small"
      @blur="handleInputConfirm"
  />
  <el-button v-else class="button-new-tag" size="small" @click="showInput">
    + 添加值
  </el-button>
</template>

<script setup>
import {nextTick, ref} from "vue";

const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref(null)

//定义事件
const emit = defineEmits(['addTagEvent'])
//定义接收父级传递的参数
const props = defineProps({
  row:{
    type: Object,
    default:()=>Object
  }
})

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

const handleInputConfirm = () => {
  //触发事件
  emit('addTagEvent',{'inputValue':inputValue.value,'row':props.row})
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<style scoped>
.input-tag {
  width: 100px;
}
</style>